.article-detail {
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

    .ant-drawer {
        inset: unset;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        text-align: left;

        .ant-drawer-content {
            background-color: rgba($color: #ffffff, $alpha: .9);

            .ant-drawer-title {
                position: relative;
                padding-left: 1em;
                font-size: var(--Font-Size-Title-Small);

                &::before {
                    content: "";
                    display: block;
                    position: absolute;
                    top: 50%;
                    left: 0;
                    transform: translateY(-50%);
                    border-radius: 1em;
                    width: 6px;
                    height: 80%;
                    background-color: rgba($color: var(--Color-Theme-RGB), $alpha: 0.75);
                }
            }
        }

        .ant-drawer-mask {
            @extend .ant-drawer
        }

        .article-menu {
            $border-left-pre: 5px solid;

            .title-anchor.active {
                $bg-color: rgb(142, 212, 149, .25);
                $color: #219e40;
                color: $color;
                border-left: $border-left-pre rgba($color, .75);
                background-color: $bg-color;

                &:hover {
                    background-color: $bg-color;
                }
            }

            .title-anchor {
                box-sizing: border-box;
                padding-right: 0 !important;
                display: -webkit-box !important;
                margin: 0;
                overflow: hidden;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                font-size: var(--Font-Size-Content-Medium);
                color: #000;
                font-weight: 500;
                border-left: $border-left-pre rgba(#aaa, .75);
                line-height: 2.5;

                &:hover {
                    background-color: unset;
                }

                small {
                    color: #aaa;
                }
            }

            $padding-left-rate:.25em;

            .title-level1 {
                padding-left: $padding-left-rate*1 !important;
            }

            .title-level2 {
                padding-left: $padding-left-rate*2 !important;
            }

            .title-level3 {
                padding-left: $padding-left-rate*3 !important;
            }

            .title-level4 {
                padding-left: $padding-left-rate*4 !important;
            }

            .title-level5 {
                padding-left: $padding-left-rate*5 !important;
            }

            .title-level6 {
                padding-left: $padding-left-rate*6 !important;
            }
        }
    }


    .ant-image {

        .ant-image-img {
            width: auto;
            max-width: 100%;
        }
    }

    >h1 {
        width: max-content;
        max-width: 100%;
        text-align: left;
        margin: .67em auto;
    }

    >.introduction,
    .info {
        line-height: 1.5;
        width: max-content;
        max-width: 100%;
        margin: auto;
        text-align: left;
        color: var(--Color-Theme)
    }

    .introduction {
        white-space: pre-wrap;
    }

    .article-cover {
        max-width: 600px;
        margin-bottom: 10px;
    }

    .info {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        >span,
        >a {
            margin: 0 20px;
            color: var(--Color-Theme);
            text-decoration: none;
            word-break: keep-all;
        }

        margin-bottom: 10px;
    }
}